<template>
  <div>
    <el-upload
      class="editor-upload"
      action="#"
      accept="image/gif,image/svg+xml,image/png,image/jpeg,image/jpg"
      name="file"
      :show-file-list="false"
      :http-request="onUpload"
      :before-upload="beforeUploadEdit"
    >
     <el-button ref="imgUploade">上传</el-button>
    </el-upload>
    <quill-editor
       v-loading="imgLoading"
        class="ql-editor"
        v-model="innerContent"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
    </quill-editor>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { uploadApi } from '@/api/rights/rights'
export default {
  props: {
    content: String
  },
  data () {
    return {
      imgLoading: false,
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // toggled buttons
              ['blockquote', 'code-block'],

              [{ 'header': 1 }, { 'header': 2 }], // custom button values
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
              [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
              [{ 'direction': 'rtl' }], // text direction

              [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

              [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
              [{ 'font': [] }],
              [{ 'align': [] }],
              ['link', 'image', 'video'],
              ['clean'] // remove formatting button
            ],
            handlers: {
              'image': (value) => {
                if (value) {
                // 触发input框选择图片文件
                  console.log(this.$refs['imgUploade'])
                  this.$refs['imgUploade'].$el.click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },
      innerContent: this.content
    }
  },
  watch: {
    content (val) {
      this.innerContent = val
    },
    innerContent (val) {
      this.$emit('update:content', val)
    }
  },
  components: {
    quillEditor
  },
  methods: {
    beforeUploadEdit (res, file) {
      this.imgLoading = true// 显示loading
    },
    onUpload ({ file, data = {} }) {
      const forms = new FormData()
      forms.append('file', file)
      uploadApi(forms).then(res => {
        const url = res.data?.url
        let quill = this.$refs.myQuillEditor.quill
        let length = quill.getSelection().index
        quill.insertEmbed(length, 'image', url)
        quill.setSelection(length + 1)
      }).finally(() => {
        this.imgLoading = false
      })
    },
    onEditorBlur (e) {
      this.$emit('onEditorBlur', e)
    },
    onEditorFocus (e) {
      this.$emit('onEditorFocus', e)
    },
    onEditorChange (e) {
      this.$emit('onEditorChange', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.editor-upload{
  display: none;
}
.ql-editor{
  padding: 0;
  overflow: visible;
}
</style>
